<template>
	<template v-if="showGzh && userStore.isLogin">
		<view @click="openGzh" class="gzh-box shadow">
			<view class="fr-ac-jsb">
				<view class="">
					小程序关联的公众号
				</view>
				<view @click.stop="showGzh=false" class="">
					<up-icon name="close"></up-icon>
				</view>
			</view>
			<view class="fr-ac mt-10">
				<view class="gzh-icon fc-ac-jc">
					<!-- <view class="bold">
						{{userStore.user_province}}
					</view>
					<view class="bold">
						高考
					</view> -->
				</view>
				<view class="ml-20">
					<view class="fs-32 bold">
						{{userStore.user_province}}高考早知道
					</view>
					<view class="fs-26 mt-10">
						点击关注我，了解更多高考信息！
					</view>
				</view>
				<view class="gzh-star shadow fs-32 bold">关注</view>
			</view>
		</view>
		<view class="" style="height: 200rpx;"></view>
	</template>
</template>
<script setup>
	import {
		ref,
	} from 'vue'
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const props = defineProps({
		link: {
			default: 'https://mp.weixin.qq.com/s/qVHFSkNppox4QC11pkWjig'
		}
	})
	// 公众号浮窗
	const showGzh = ref(true)
	const openGzh = () => {
		// #ifdef MP-WEIXIN || APP
		uni.navigateTo({
			url: "/pages/webview/switch_terminal?src=" + props.link
		})
		// #endif
		// #ifdef H5
		window.open(props.link)
		// #endif
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}

	.gzh-box {
		position: fixed;
		bottom: 200rpx;
		left: 0;
		box-sizing: border-box;
		border-radius: 30rpx;
		padding: 20rpx 30rpx;
		background-color: rgba(255, 255, 255, 0.95);
		border-radius: 16rpx;
		z-index: 999;
		backdrop-filter: blur(20px);

		.gzh-icon {
			width: 85rpx;
			height: 85rpx;
			border: 2rpx solid #ffffff;
			background: url("https://file.gkzzd.cn/www/gkzzd/uploads/20250321/0593738060e68c2bebffce6f0aa40875.jpg");
			background-size: cover;
			color: #fff;
			line-height: 1.2;
			letter-spacing: 4rpx;
			border-radius: 12rpx;
		}

		.gzh-star {
			margin-left: auto;
			border-radius: 40rpx;
			background-color: #fff;
			color: var(--color);
			padding: 10rpx 24rpx;
			animation: myBreath 1.5s ease-in infinite;
		}

		@keyframes myBreath {
			0% {
				filter: brightness(1);
				/* 提升亮度 */
				transform: scale(0.88);
			}

			50% {
				transform: scale(100%);
				filter: brightness(1.2);
				/* 提升亮度 */
			}

			100% {
				transform: scale(0.88);
				filter: brightness(1);
				/* 提升亮度 */
			}
		}
	}
	
	@media screen and (min-width:960px){
		.gzh-box{
			left: 50%;
			width: calc(750rpx - 60rpx);
			transform: translateX(-50%);
		}
	}
	@media screen and (max-width:960px){
		.gzh-box{
			left: 0;
			width: calc(100vw - 60rpx);
			margin: 0 30rpx;
		}
	}
</style>